<template>
    <div class="my-chart">
        <div class="my-chart-top">
            <span>{{i18n('myChartBoard','我的图表')}}</span>
            <a-button style="margin-left: 20px" v-if="!editShow" size="small" @click="editChart">{{i18n('editPage','编辑')}}</a-button>
            <template v-else>
                <a-button type="link" @click="addChart">
                    <template #icon>
                        <PlusOutlined/>
                    </template>
                    {{i18n('itemAdd','添加')}}
                </a-button>
                <a-button size="small" @click="saveChart">{{i18n('save','保存')}}</a-button>
            </template>
        </div>
        <div class="my-chart-layout">
            <div v-if="layout.length==0" class="rx-empty"><a-empty :description="i18n('emptyChartBoard','暂无图表')" /></div>
            <grid-layout
                v-else
                :layout.sync="layout"
                :col-num="24"
                :row-height="2"
                :is-draggable="isDraggable"
                :is-resizable="isResizable"
                :is-mirrored="false"
                :vertical-compact="true"
                :autoSize="true"
                :margin="[10, 10]"
                :use-css-transforms="true"
            >
                <grid-item
                    v-for="(item,index) in layout"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    :key="item.id"
                >
                    <div class="gridLayoutClass">
                        <form-custom-control v-if="item.config && item.config.id" :charBoardAppId="item.appId" :id="item.config.id" :item="item.config" :ref="item.config.id" :readonly="true"></form-custom-control>
                        <div class="rx-empty" v-else>
                            <a-empty :description="null" />
                            {{$i18(item.config.name)}}
                        </div>
                        <div class="my-remove" v-if="editShow" @click="removeChart(item,index)">
                            <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
                        </div>
                    </div>
                </grid-item>
            </grid-layout>
        </div>
    </div>
</template>

<script>
import FormCustomPublic from "@/views/modules/form/FormCustomView/components/FormCustomPublic";
import InsPortalDefApi from "@/common/api/portal/insPortalDef";
import FormChartBoard from "./FormChartBoard.vue";
import {Util} from '@lowcode/jpaas-base-lib';
import {GridLayout, GridItem} from 'vue-grid-layout';
import FormCustomControl from "@/views/modules/form/FormCustomView/GridLayoutView/FormCustomControl.vue";

export default {
    name: "MyChartBoardView",
    mixins: [FormCustomPublic],
    components: {
        GridLayout,
        GridItem,
        FormCustomControl
    },
    props: {
        portalId: {}
    },
    data() {
        return {
            layout: [],
            chartAlias: [],
            isDraggable: false,//是否可拖拽
            isResizable: false,//是否可编辑大小
            editShow:false,
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartBoard", key);
        },
        init() {
            let self = this;
            self.chartAlias = [];
            InsPortalDefApi.getChartView(this.viewKey).then(res => {
                self.layout = JSON.parse(res.config || "[]");
                self.layout.filter(then => {
                    self.chartAlias.push(then.alias+then.appId)
                })
            })
        },
        addChart() {
            let self = this;
            Util.open({
                component: FormChartBoard,
                curVm: this,
                title:this.i18n('addChartBoard','添加图表'),
                max: false,
                widthHeight: ['400px', '600px'],
                data:{
                    chartAlias:self.chartAlias
                }
            }, function (action, data) {
                if (action != 'ok') return;
                self.addChartInit(data)
            });
        },
        addChartInit(list) {
            let self = this;
            list.filter(res => {
                if(!self.chartAlias.contains(res.alias+res.appId)){
                    let maxHeight = this.getMaxHeight()
                    let height = maxHeight + 16
                    let time = new Date().getTime() + Util.randomId()
                    let newLayout = {
                        x: 18,
                        y: height,
                        w: 6,
                        h: 16,
                        i: time,
                        id: Util.randomId(),
                        config: {},
                        active: false,
                        main: false,
                        mobileH: 300,
                        mobileShow: true,
                    }
                    newLayout.config = res;
                    self.layout.push(newLayout)
                    self.chartAlias.push(res.alias+res.appId)
                }
            })
        },
        getMaxHeight() {
            var layout = this.layout
            if (!layout || layout.length == 0) {
                return 0
            }
            let maxHeight = 0
            var idx = 0
            for (var i = 0; i < layout.length; i++) {
                var compoment = layout[i]
                if (maxHeight < compoment.y) {
                    maxHeight = compoment.y
                    idx = i
                }
            }
            let max = layout[idx].y + layout[idx].h
            return max
        },
        removeChart(chart, index) {
            this.layout.splice(index, 1);
            this.chartAlias.splice(index,1);
            InsPortalDefApi.delByAliasChartId(this.viewKey, chart.id);
        },
        saveChart() {
            let self = this;
            let configList = []
            self.layout.filter(item=>{
                if(!item.pageAlias){
                    configList.push(item)
                }else {
                    configList.push({
                        x: item.x,
                        y: item.y,
                        w: item.w,
                        h: item.h,
                        i: item.i,
                        id: item.id,
                        config: {
                            appId: item.appId,
                            pageAlias:item.pageAlias,
                            alias:item.alias,
                            moduleId:item.moduleId
                        },
                        active: item.active,
                        main: item.main,
                        mobileH: item.mobileH,
                        mobileShow: item.mobileShow,
                    })
                }
            })
            InsPortalDefApi.addChartView({config: JSON.stringify(configList), alias: self.viewKey}).then(res => {
                self.isDraggable = false;
                self.isResizable = false;
                self.editShow =false
                self.init();
            });
        },
        editChart(){
            this.isDraggable = true;
            this.isResizable = true;
            this.editShow =true
        },
    }
}
</script>

<style scoped>
.my-remove{
    border-radius: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: rgba(255, 88, 90, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9999;
}
.my-chart {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-chart >>> .vue-grid-layout {
    background: white;
}

.my-chart-layout {
    flex: 1;
    overflow: auto;
}

.my-chart-top {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #dadde0;
}

.gridLayoutClass {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #dadde0;
    position: relative;
}
.rx-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
</style>
